<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Binding to remote data</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Binding to remote data</div>
        <!-- description -->
        <div id="example" class="k-content">

            <div id="tweets-container" class="k-header k-menu-vertical">
                <h3>Twitter feed</h3>

                <div id="search-box">
                    <label>Search for: <input type="text" value="html5" id="searchfor" /></label>
                    <button class="k-button" id="search">search</button>
                </div>

                <div id="tweets">
                    <div>Loading ... </div>
                </div>
            </div>

            <script id="template" type="text/x-kendo-template">
                <div class="tweet k-header">
                    <img width="48" height="48" src="#= profile_image_url #" alt="#= from_user #" />
                    #= text #
                    <div class="metadata">
                        <a class="k-link" href="http://twitter.com/#= from_user #" rel="nofollow">#= from_user #</a>
                        |
                        #= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #
                    </div>
                </div>
            </script>

            <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://search.twitter.com/search.json", // the remove service url
                                dataType: "jsonp", // JSONP (JSON with padding) is required for cross-domain AJAX
                                data: { //additional parameters sent to the remote service
                                    q: function() {
                                        return $("#searchfor").val();
                                    }
                                }
                            }
                        },
                        schema: { // describe the result format
                            data: "results" // the data which the data source will be bound to is in the "results" field
                        },
                        change: function() { // subscribe to the CHANGE event of the data source
                            $("#tweets").html(kendo.render(template, this.view()));
                        }
                    });

                    // read data from the remote service
                    dataSource.read();

                    $("#search").click(function() {
                        dataSource.read();
                    });

                    $("#searchfor").keydown(function(e) {
                        if (e.keyCode === kendo.keys.ENTER) {
                            dataSource.read();
                        }
                    });
                });
            </script>

            <style scoped>
                #tweets-container {
                    width: 60%;
                    margin: 0 auto;
                    border-width: 1px;
                    border-style: solid;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    border-radius: 10px;
                    padding: 18px 16px 29px 26px;
                    position: relative;
                }

                #tweets-container h3 {
                    color: #358ae0;
                    font-size: 18px;
                    line-height: 32px;
                    padding-left: 40px;
                    font-weight: normal;
                    background: transparent url("../content/datasource/remote-data/twitter-icon.png") no-repeat 0 50%;
                }

                #search-box {
                    position: absolute;
                    top: 30px;
                    right: 16px;
                }

                #tweets {
                    overflow: auto;
                    padding-right: 10px;
                    height: 400px;
                }

                .tweet {
                    vertical-align: top;
                    padding: 6px;
                    border-width: 1px;
                    border-style: solid;
                    margin: 0 0 5px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    border-radius: 10px;
                    overflow: hidden;
                }

                .tweet img {
                    float: left;
                    margin-right: 10px;
                }

                .tweet .metadata {
                    clear: left;
                    padding-top: 6px;
                    font-size: 10px;
                }

                .tweet .k-link:hover {
                    text-decoration: underline;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


